<!-- subpkg_archive/list/index.vue -->
<script lang="ts" setup>
import { patientListApi, removePatientApi } from '@/apis/patient'
import { useConsultStore } from '@/stores/consult';
import type { PatientItem } from '@/types/patient'
import { onPageShow } from '@dcloudio/uni-app';
import { ref } from 'vue'

const swipeOptions = ref([
  {
    text: '删除',
    style: {
      backgroundColor: '#dd524d',
      color: '',
      fontSize: '',
    },
  },
])

// 1.获取列表数据
const patientList = ref([] as PatientItem[])
// 直接发请求 类似于 鸿蒙中的 aboutToAppear
const getList = async () => {
  const res = await patientListApi()
  // console.log(res)
  patientList.value = res
  console.log('获取数据')
}
// 页面显示就会执行，返回也会触发
onPageShow(() => {
  // console.log('显示啦~~')
  getList()
})

//点击删除
const clickItem=async (id:string,index:number)=>{
console.log('点了删除')
await removePatientApi(id)
//删除成功(换成重新调用列表接口，浪费服务器的性能【移动端是一个较为常见的优化细节】)
patientList.value.splice(index,1)

 // 删除 仓库中 病人的 id，避免逻辑错误
 store.patientId = ''
}

// 根据路由参数 区分 页面的标题
const props = defineProps<{ type: string }>()
// console.log(props)
if (props.type == 'consult') {
  // 修改标题
  uni.setNavigationBarTitle({
    title: '选择患者',
  })
}
// 选择高亮 基于 pinia 中的 id
const store = useConsultStore()

const selectedPatient = (id:string)=>{
   // 选择患者时，才切换高亮，否则 不切换
   if(props.type == 'consult'){
    store.patientId = id 
   }
}

// 去 等待支付页面
const toPayment = () => {
  uni.navigateTo({
    url: '/subpkg_consult/payment/index',
  })
}
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <view class="archive-tips">最多可添加6人</view>

      <uni-swipe-action>
        <uni-swipe-action-item v-for="(item, index) in patientList" :key="item.id" :right-options="swipeOptions" @click="clickItem(item.id,index)">
          <!-- active 默认才需要添加 -->
          <view class="archive-card" :class="{ active: store.patientId == item.id }" @click="selectedPatient(item.id)">
            <view class="archive-info">
              <text class="name">{{ item.name }}</text>
              <text class="id-card">{{
                // '110107202003167588'.replace(/^(.{6}).+(.{4})$/,'$1********$2')
                // ^(.{6}) 开头 6 位
                // (.{4})$ 结尾 4 位
                // $1********$2开头，结尾原封不动，中间替换为**
                item.idCard.replace(/^(.{6}).+(.{4})$/, '$1********$2')
              }}</text>
              <!-- 默认才需要显示 -->
              <text v-if="item.defaultFlag == 1" class="default">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{ item.genderValue }}</text>
              <text class="age">{{ item.age }}岁</text>
            </view>
            <navigator hover-class="none" class="edit-link" :url="'/subpkg_archive/form/index?id=' + item.id">
              <uni-icons type="icon-edit" size="20" color="#16C2A3" custom-prefix="iconfont" />
            </navigator>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="patientList.length < 6" class="archive-card">
        <navigator class="add-link" hover-class="none" url="/subpkg_archive/form/index">
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label">添加患者</text>
        </navigator>
      </view>
    </view>
  </scroll-page>
  <view class="box" v-if="props.type == 'consult'">
    <button @click="toPayment" class="uni-button">下一步</button>
  </view>
</template>

<style lang="scss">
@import './index.scss';

.box {
  padding: 20rpx;
}
</style>
